<script setup>
import { computed } from 'vue';
import { data } from "@/config/config";

const a = function (e) {
  return 'txt' + e;
};
const title = computed(() => data.index.notice.title);
const content = computed(() => data.index.notice.content);
const time = computed(() => data.index.notice.time);
const load=function(){
  window.open("../img/主页/u12.png")
}
</script>

  <!-- <el-row :gutter="20">
    <el-col :span="2.5" :offset="5"><img src="../img/主页/u8.png" alt="" style="width:174px;height:171px;"></el-col>
    <el-col :span="10" >
      <img src="../img/主页/u7.png" alt="" style="width: 100%;;height: 171px;">
    </el-col>
    <el-col :span="6" :offset="0"><img src="../img/主页/u9.png" alt="" style="width:174px;height:171px;"></el-col>
  </el-row> -->




  <template>
  <el-carousel :interval="2000" type="card" height="200px">
    <el-carousel-item v-for="item in 1" :key="item">
      <img src="../img/主页/u7.png" alt="" style="width: 100%;;height: 200px;">
    </el-carousel-item>
    <el-carousel-item v-for="item in 1" :key="item">
      <img src="../img/主页/u9.png" alt="" style="width:100%;height:200px;">
    </el-carousel-item>
    <el-carousel-item v-for="item in 1" :key="item">
      <img src="../img/主页/u8.png" alt="" style="width:100%;height:200px;">
    </el-carousel-item>
  </el-carousel>


  <div class="ibox mid">
    <div class="notice" v-for="i in 4">
      <div class="title"><span>{{ title[i - 1] }}</span></div>
      <RouterLink to="/Imformation">
        <div class="content" v-for="o in content[a(i)]">
          <img src="../img/主页/u19.png" alt="" class="titleImg">
          <div class="hide-text">{{ o }}</div>
          <div class="itime">{{ time }}</div>
        </div>
      </RouterLink>
    </div>
  </div>
</template>
<style>
.el-carousel__item img {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/*  */
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  padding-left: 80px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
/*  */
body {
  background-color: #fafafa;
}


.hide-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 350px;
}

.itime {
  margin-left: 50px;
  white-space: nowrap;
}
.ibox.mid{
  width: 1230px;
}
.mid {
  width: 85%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 80px;
}

.ibox {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  /* min-width: 1200px; */
}

.notice {
  width: 560px;
  height: 330px;
  margin-top: 50px;
  margin-left: 50px;
  border-radius: 15px;
  background-color: #ffffff;
}

@media screen and (max-width: 1280px) {
  .notice {
    width: 500px;
  }
}


.title {
  width: 100%;
  height: 34px;
  color: #fff;
  padding-left: 20px;
  background-image: url("../img/主页/u12.png");
  background-size: 100%;
  display: flex;
  align-items: center
}

.titleImg {
  width: 20px;
}

.content {
  margin: 30px 20px;
  display: flex;
}

.ie {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.a {
  height: 300px;
  border-radius: 4px;
  border: 1px solid red;
}

.a:nth-child(2n) {
  margin-left: 100px;

}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>